<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>叮当猫</title>
    <style type="text/css">
        *{ margin: 0; padding: 0; box-sizing: border-box; }

        #mySvg{
            width: 500px;
            height: 600px;
            border: 1px solid #ccc;
            display: block;
            margin: 100px auto;
        }
        /* 定义一个蓝色填充黑色描边的类目 */
        .setFill{
            fill: #2e87fd;
        }
        .noFill{
            fill: transparent;
        }
        .setStorke{
            stroke: #000;
        }
        .noStroke{
            stroke: transparent;
        }
        /* 红领带 */
        .tie{
            fill: #f00;
            stroke: #000;
        }
        /* 裤子 */
        #pants{
            stroke: #000;
            fill: #fff;
        }
        /* 脚 */
        .foot{
            stroke: #000;
            fill: #fff;
        }
        
    </style>
</head>
<body>
    <svg id='mySvg'>
        <!-- 头部 -->
        <circle class='setFill setStorke' r='163' cx='250' cy='220'></circle>
       
        <!-- 身体 -->
        <rect class="setFill noStorke" x='150' y='368' width='200' height='160'></rect>
        <line style="stroke: #000; stroke-width: 1px;" x1='150' y1='394' x2='150' y2='520'></line>
        <line style="stroke: #000; stroke-width: 1px;" x1='350' y1='394' x2='350' y2='520'></line>

        <!-- 肚子 -->
        <circle r='80' cx='250' cy='410' style="fill: #fff; stroke:#000"></circle>


        <!-- 脸部 -->
        <ellipse rx='134' ry='109' cx='250' cy='260' style="fill: #fff; stroke: #000;"></ellipse>
        <!-- 眼睛 -->
        <ellipse rx='39' ry='46' cx='211' cy='160' style="fill: #fff; stroke: #000;"></ellipse>
        <ellipse rx='39' ry='46' cx='289' cy='160' style="fill: #fff; stroke: #000;"></ellipse>
        <!-- 眼珠子 -->
        <ellipse rx='7' ry='11' cx='218' cy='178' style="fill: #000;"></ellipse>
        <ellipse rx='7' ry='11' cx='288' cy='178' style="fill: #000;"></ellipse>
        <!-- 鼻子 -->
        <circle r='17' cx='250' cy='206' style="fill: #f00; stroke:transparent"></circle>
        <ellipse rx='6' ry='7' cx='258' cy='202' style="fill: #fff; stroke: transparent;"></ellipse>

        <!-- 嘴巴 -->
        <line x1='250' y1='223' x2='250' y2='320' style="stroke: #000;"></line>
        <path d='M 166 284 A 85 36 , 0 , 0 , 0 , 336 284' style="fill: transparent; stroke: #000;"></path>

        <!-- 胡须 -->
        <line x1='144' y1='222' x2='212' y2='236' style="stroke: #000;"></line>
        <line x1='138' y1='248' x2='212' y2='248' style="stroke: #000;"></line>
        <line x1='145' y1='275' x2='212' y2='262' style="stroke: #000;"></line>

        <line x1='292' y1='236' x2='360' y2='222' style="stroke: #000;"></line>
        <line x1='292' y1='248' x2='366' y2='248' style="stroke: #000;"></line>
        <line x1='292' y1='262' x2='360' y2='275' style="stroke: #000;"></line>

         <!-- 红领带 -->
         <rect class="tie" x='142' y='348' width='216' height='20' rx='10' ry='10'></rect>

        <!-- 铃铛 -->
        <circle r='21' cx='250' cy='375' style="fill: #d9d116; stroke: #000;"></circle>
        <line x1='234' y1='364' x2='266' y2='364' style="stroke: #000;"></line>
        <line x1='230' y1='370' x2='270' y2='370' style="stroke: #000;"></line>
        <circle r='6' cx='250' cy='384' style="fill: #000;"></circle>
        <line x1='250' y1='390' x2='250' y2='396' style="stroke: #000;" ></line>

        <!-- 口袋 -->
        <path d='M 204 420 A 48 54 , 0 , 0 , 0 , 300 420 z ' style="stroke: #000; fill: transparent;"></path>





        <!-- 左手 -->
        <path d='M 150 368 L 114 350,102 387,150 410' style="stroke: #000; fill:#2e87fd;"></path>
        <circle cx='90' cy='364' r='28' style="stroke: #000; fill: #fff;"></circle>

        <!-- 右手 -->
        <path d='M 350 368 L 406 392,388 424,350 410' style="fill: #2e87fd; stroke: #000;"></path>
        <circle cx='412' cy='416' r='28' style="fill: #fff; stroke: #000;"></circle>

        <!-- 胯裆 -->
        <path id="pants" d='M 235 528 A 10 15 , 0 , 1 , 1 , 265 528'></path>
        <!-- 脚 -->
        <ellipse class='foot' rx='60' ry='15' cx='188' cy='530'></ellipse>
        <ellipse class='foot' rx='60' ry='15' cx='315' cy='530'></ellipse>







    </svg>
</body>
</html>